<template>
  <div class="listing-com">
      <div class="land">
        <div class="contain">
          <div class="brief">
              <h1>
              Search for your dream property
              </h1>
              <!-- Learn real estate and blockchain investments, discover new perspectives, and read the latest updates from Frontrock.  -->
              <div class="search">
                 <!--  :fetch-suggestions="querySearchAsync"  @select="handleSelect" -->
                <el-input @keydown.native.enter="onKeyEnterDown()" @select-when-unmatched="selWhenMat()" 
                prefix-icon="el-icon-search" v-model="keywords"
                placeholder="Los Angeles, CA" size="medium"></el-input>
                <div class="buttons" @click="gotoHouseList()">
                    <a href="javascript:;" class="start">Search</a>
                </div>
              </div>
          </div>
          <!-- <div class="cloud"></div> -->
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'listing',
  init() {},
  mounted() {
      console.log('marketplace home, search list page.')
      this.lists = this.loadQueryList()
  },
  components: {},
  data() {
    return {
        keywords: '',
        timeout:  null,
        listData: [
          {
            id: 1,
            money: '10,000.00'
          },
          {
            id: 2,
            money: '20,000.00'
          },
          {
            id: 3,
            money: '17,220.00'
          },
          {
            id: 4,
            money: '37,133.00'
          },
          {
            id: 5,
            money: '12,666.12'
          },
          {
            id: 6,
            money: '27,888.33'
          }
        ]
    }
  },
  methods: {
    selWhenMat() {
      console.log('selWhenMat:')
    },
    onKeyEnterDown() {
      this.gotoHouseList()
    },
    openArticle(id) {
      Bus.$emit('topbar', 8)
      // window.open(`./#/article?id=${id}`)
    },
    loadQueryList() {
        return [
          { "value": "Pasadena, CA Properties for Sale", "id": "11" },
          { "value": "Fremont", "id": "22" }
        ]
    },
    querySearchAsync(queryString, cb) {
      let lists = this.lists
      let results = queryString ? lists.filter(this.createKeywordsFilter(queryString)) : lists

      clearTimeout(this.timeout)
          this.timeout = setTimeout(() => {
          cb(results)
      }, 500 * Math.random())
    },
    createKeywordsFilter(queryString) {
        return (keywords) => {
            return (keywords.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
        }
    },
    handleSelect(item) {
        console.log(item)
    },
    gotoHouseList() {
      Bus.$emit('topbar', 10)
      Bus.route.keywords = this.keywords
      // location.hash += `?kw=${this.keywords}`
    }
  },
  beforeDestroy() {}
};
</script>

<style scoped="scoped" lang="scss">
.listing-com {
    position: relative;
    // text-align: center;
    color: #fff;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    display: grid;
    place-items: center;
    height: 100vh;
    .land{
      font-family: Newsreader, serif;
      // margin: -23% 0 0 0;
      // height: 300px;
      // width: 100%;
      // display: inline-block;
      .contain{
        // height: 660px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: left;
        @media screen and (max-width: 720px) {
          // height: 360px;
          padding-bottom: 100px;
          flex-direction: column-reverse;
        }
        .brief{
            // width: 30%;
            width: 100%;
            font-size: 16px;
            line-height: 22px;
            h1{
              font-size: 42px;
              font-weight: 900;
              line-height: 52px;
              margin: 0 0 0px 0;
            }
            .search{
                margin: 60px 0 0 0;
                display: flex;
                align-items: center;
                .buttons{
                    padding: 0;
                    text-align: center;
                    margin:0 0 0px 10px;
                    z-index: 100;
                    a{
                        width: 140px;
                        height: 56px;
                        line-height: 54px;
                        // padding: 2px 0 14px 0;
                    }
                }
            }
            @media screen and (max-width: 720px) {
                width: 90%;
                letter-spacing:1px;
                h1{
                  font-size: 36px;
                  letter-spacing: 0;
                }
                .search{
                  margin: 10px 0 0 0;
                  .buttons{
                    display: none;
                  }
                }
            }
        }
        // .cloud{
        //     background: url(../assets/blog_bg.png) no-repeat;
        //     background-size:auto 100%;
        //     background-position: center 50%;
        //     width: 56%;
        //     height: 500px;
        //     @media screen and (max-width: 720px) {
        //       width: 90%;
        //       height: 240px;
        //       left: -50px;
        //       right: -50px;
        //     }
        // }
      }
      
      .buttons{
        // width: 40%;
        padding: 80px 0;
        .start, .know-more{
          width: 240px;
          height: 40px;
          line-height: 35px;
          box-sizing: border-box;
          border: 2px solid #6271F1;
          box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.2);
          border-radius: 44px;
          color: white;
          font-family: "Krona One", monospace;
          font-size: 14px;
        //   font-weight: bold;
          text-decoration: none;
          display: inline-block;
          margin: 0 8px;
          &.start{
            background: #6271F1;
            &:hover{
              filter: brightness(1.1);
            }
          }
          &.know-more{
            border:1px solid;
            &:hover{
              background: rgba(239, 101, 102, .1);
              // background: #EF6566;
              // border: 1px solid transparent;
            }
          }
          @media screen and (max-width: 640px) {
            width: 90%;
            margin:0;
          }
        }
      }
    }
  }
</style>

<style lang="scss">
.listing-com{
  // display: inline-flex;
  align-content: center;
  height: 100vh;
    .brief{
        .search{
            .el-input{
                .el-input__inner{
                    border:none;
                    height: 56px;
                    width: 540px;
                    font-size: 16px;
                    border-radius: 35px;
                    padding: 4px 0  0 60px;
                    font-family: Newsreader, serif;
                    font-weight: 100;
                    font-family: "Krona One", monospace;
                    color:#070F4E;
                    &::placeholder{
                      color:#070F4E;
                    }
                }
                .el-input__prefix{
                  top:3px;
                }
                .el-icon-search{
                  transform: scale(1.3);
                  color: #070F4E;
                  font-weight: bold;
                  margin: 0 10px;
                }
            @media screen and (max-width: 720px) {
              // margin:-20px 0 0 0;
              position: relative;
              .el-input__inner{
                // width: 350px;
                position: absolute;
                // padding: 0;
                top:0;
                left: 0px;
                right: 10px;
                height: 45px;
                width: auto;
                min-width: 350px;
                // width: 100%;
              }
            }
            }
        }
    }
}

.el-autocomplete-suggestion{
  .el-scrollbar{
    ul.el-autocomplete-suggestion__list{
      li{
        font-size: 12px;
        font-family: "Krona One", monospace;
      }
    }
  }
}
</style>